<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Login</title>  
</head>  
<body>  
    <h2>Login</h2>  
    {% with messages = get_flashed_messages(with_categories=true) %}  
      {% if messages %}  
        <ul>  
        {% for category, message in messages %}  
          <li class="{{ category }}">{{ message }}</li>  
        {% endfor %}  
        </ul>  
      {% endif %}  
    {% endwith %}  
    <form method="POST" action="{{ url_for('login') }}">  
        <label for="username">Username:</label>  
        <input type="text" id="username" name="username" required><br><br>  
        <label for="password">Password:</label>  
        <input type="password" id="password" name="password" required><br><br>  
        <button type="submit">Login</button>  
    </form>  
    <p><a href="{{ url_for('logout') }}">Logout</a> (if logged in)</p>  
</body>  
</html>